<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <title>influx</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
    <script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <style type="text/css">
        .line1{
            left:100px;
            width:850PX;
            height:5px;
            border:none;
            border-top:1px solid #e7ebe7;
        }
        .form-inline .form-control {
             display: inline-block;
             width: 400px;
             vertical-align: middle;
        }
        .form-inline .form-control2 {
             display: inline-block;
             width: 800px;
             vertical-align: middle;
             height: 34px;
             padding: 6px 12px;
             font-size: 14px;
             line-height: 1.42857143;
             color: #555555;
             background-color: #fff;
             background-image: none;
             border: 1px solid #ccc;
             border-radius: 4px;
        }
        .warning{
             left: 560px;
             position:absolute;
        }
        .warning2{
             left: 1000px;
             position:absolute;
        }
        .modal-dialog {
             width: 900px;
             margin: 30px auto;
        }
        .navbar{
            border-radius: 0;
        }

    </style>
</head>
<body>
{% include 'head.html' %}
<div>
    <div class="container">
        <form class="form-horizontal" role="form" method="post" action="/influxdb/" onsubmit="return check(this)">
            {% csrf_token %}
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">基本信息</h3>
                </div>
                <div class="panel-body">
                    <div class="form-inline">
                        <label class="col-md-2 control-label ">IP</label>
                        <input type="text" class="form-control" id="IP"
                               placeholder="请输入IP" name="IP" value="{{data.IP}}">
                        <span style="color:red; display:none" id="inputIP">请输入IP</span>
                    </div>
                    <div class="form-inline" style="margin-top:10px">
                        <label class="col-md-2 control-label">数据库表</label>
                        <input class="col-md-1 form-control" id="PID" type="text" placeholder="database table"
                               name="PID" value="{{ data.PID }}">

                    </div>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">数据库语句</h3>
                </div>
                <div class="panel-body">
                    <div class="form-inline">


                                                <input class="col-md-4 form-control2"  list = "sqllist" id="sql" type="text" style="margin-left: 86px;"
                                                       placeholder="输入命令行语句" name="sql" value="{{data.sql}}">
                                                        <datalist id="sqllist">
<!--                                                            <option style="display:none">{{ data.sql }}</option>-->
                                                               {% for sql in sqls %}
                                                               <option>{{sql}}</option>
                                                               {% endfor%}
                                                        </datalist>
                                                </input>
<!--                          select 不能编辑-->
<!--                        <select class="col-md-4 form-control2" id="sql" type="text" style="margin-left: 86px;"-->
<!--                                placeholder="输入命令行语句" name="sql"-->
<!--                                value="" onchange="this.parentNode.nextSibling.value=this.value">-->
<!--                            <option style="display:none">{{ data.sql }}</option>-->
<!--                            {% for sql in sqls %}-->
<!--                            <option>{{sql}}</option>-->
<!--                            {% endfor%}-->
<!--                        </select>-->
                        <button type="submit" class="btn btn-primary " name="Submit" style="margin-left: 10px;"
                                value="RunClish">执行
                        </button>
                    </div>
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">执行结果 {{listNum}} 条数据</h3>
                    <h6>查询耗时: {{costtime}} </h6>

                </div>
                <div class="panel-body" style="width:800px; height:440px;">
                    <p>{{errorinfo}}</p>
                    {% for line in first %}
                    <p>{{line}}</p>
                    {% endfor %}
                    ···
                    <br>
                    ···
                    <br>
                    {% for line in end %}
                    <p>{{line}}</p>
                    {% endfor %}
                </div>
            </div>
        </form>
    </div>
</div>

</body>
<script>
    $('li').attr('class','')
    $('#database').addClass('active')

</script>
</html>